<template>
    <div class="goods page">
<!--        <div class="top-bar">-->
<!--            <div class="item">-->
<!--                <div class="txt"></div>-->
<!--            </div>-->
<!--        </div>-->

        <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler" />

        <cube-slide  :autoPlay="false"  ref="slide" :data="types" @change="changePage">
            <cube-slide-item v-for="(item, index) in types" :key="index" >
                    <span>{{item.name}}</span>
            </cube-slide-item>
        </cube-slide>

        <div class="list">
            <div class="item"  @click="turn(item.id)" v-for="(item,index) in goodsList" :key="index">
                <goods-item :goods="item"></goods-item>
            </div>
        </div>

    </div>
</template>

<script>
    import goodsItem from '@/components/goods-item'
    import {listGoods} from "../../api/goods";

    export default {
        activated(){
            this.page = 1
            this.getList()
        },
        components:{
            goodsItem
        },
        data(){
            return {
                types:[
                    {
                        name:'分类1'
                    },
                    {
                        name:'分类2'
                    },
                    {
                        name:'分类3'
                    }
                ],
                labels: [
                    '快车',
                    '小巴',
                    '专车',
                    '顺风车',
                    '代驾',
                    '公交',
                    '自驾租车',
                    '豪华车',
                    '二手车',
                    '出租车'
                ],
                current:0,
                page:1,
                goodsList:null
            }
        },
        methods:{
            turn(id){
                this.$router.push({
                    path:'/detail',
                    query:{
                        id:id
                    }
                })
            },
            changePage(){

            },
            changeHandler(cur) {
                this.current = cur
                this.$refs.slide.slide.goToPage(this.labels.indexOf(cur),0,500)
            },
            getList(){
                listGoods(this.page).then(res=>{
                    this.goodsList = res.data
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .goods
        height 100%
        z-index 2
        background-color $page-bg
        .list
            display flex
            padding  10px
            justify-content space-between
            flex-wrap wrap
            background-color $page-bg
            .item
                flex 1


</style>